<template>
  <div class="container">
    <baseTable
      :total="visitorListTotal"
      :structure="visitorListSc"
      :data="visitorListData"
      :action="false"
      btn-items="export"
      @current-page-change="handleCurrentPageChange"
    >
    </baseTable>
  </div>
</template>

<script lang="ts" name="usersList" setup>
  import { onBeforeMount, ref } from 'vue'
  import { visitorListSc } from '@/components/base-table/config'
  import { getVisitorListRequest } from '@/network/api/user-api'
  import formatUtcTime from '@/utils/formatTime'
  const visitorListData = ref<any[]>([])
  const visitorListTotal = ref<number>(0)
  onBeforeMount(async () => {
    await usersListPageInit()
  })

  const usersListPageInit = async (currentPage: number = 1) => {
    const result = await getVisitorListRequest(currentPage)
    const { data, total } = result.result
    visitorListData.value = data
    visitorListData.value.forEach(item => {
      item.screen = item.screenWidth + 'px' + ' / ' + item.screenHeight + 'px'
      item.address = item.province + item.city
      item.createAt = formatUtcTime(item.createAt)
    })
    visitorListTotal.value = total
  }

  const handleCurrentPageChange = async (currentPage: number) => {
    await usersListPageInit(currentPage)
  }
</script>

<style scoped></style>
